<template>
  <div id="Error">
    <article>
      <div class="text-center">
        <h1 class="text-2xl">
          {{ statusCode }}
        </h1>
        <br />
        <span id="text" v-if="statusCode == 404">{{ $mt('Page Not Found') }}</span>
        <template v-else>
          <span id="text">{{ $mt('Something went wrong') }}</span>
        </template>
        <br />
        <div id="button">
          <div @click="handleError" class="button">
            <span>{{ timerCount }}s {{ $mt('Back to home') }}</span>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>
<script setup lang="ts">
import { clearError } from '#app'

const res = useError().value as any
const { message, statusCode, stack, statusMessage } = res
const timerCount = ref(10)
let timer = null
console.log(message)
const handleError = () => (location.href = '/')
onMounted(() => {
  timer = setInterval(() => {
    if (--timerCount.value) return
    clearTimeout(timer)
    handleError()
  }, 1000)
})
onUnmounted(() => clearInterval(timer))
</script>
<style lang="scss">
#Error {
  margin: 0;
  padding: 0;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;

  h1 {
    font-size: 36px;
    letter-spacing: 3px;
    color: #fff;
    font-family: Oswald, sans-serif;
    text-align: center;
  }

  h1 #text {
    font-family: sans-serif;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
  }

  h1 #button {
    margin: 30px 5px 5px;
    background-color: rgb(211, 211, 211, 0);
    border: solid white;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50px;
    box-shadow:
      0 8px 16px 0 rgba(0, 0, 0, 0.2),
      0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    font-family: Oswald, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    color: white;
  }

  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  .button:hover span {
    padding-right: 25px;
  }

  .button:hover span:after {
    opacity: 1;
    right: 0;
  }
}
</style>
